import { getTenantOptions } from '@/pages/Tenant/Tenant/service';
import { ProCard } from '@ant-design/pro-components';
import {
  ProFormDatePicker,
  ProFormDateTimeRangePicker,
  ProFormDigit,
  ProFormDigitRange,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormTimePicker,
} from '@ant-design/pro-form';
import { ProForm } from '@ant-design/pro-form/lib/layouts';
import { FooterToolbar } from '@ant-design/pro-layout';
import { Button, Col, Collapse, Form, Input, InputNumber, message, Row } from 'antd';
import { useState } from 'react';
import { useModel } from 'umi';
import styles from '../index.less';
import { addChargeItem } from '../service';
import { addForm } from '../types';
import { encodeTimeItem, getTimeMin } from './utils';

const { Panel } = Collapse;

interface addProps {
  close: () => void;
}

export default (prop: addProps) => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const tenantId = currUser?.tenantId;

  const [expiration, setExpiration] = useState<number>(0);
  const { close } = prop;

  return (
    <>
      <ProForm<addForm>
        submitter={{
          // 完全自定义整个区域
          render: (props, doms) => {
            return [
              <FooterToolbar key="addFooterBar">
                <Button key="rest" onClick={() => props.form?.resetFields()}>
                  重置
                </Button>
                ,
                <Button type="primary" key="submit" onClick={() => props.form?.submit?.()}>
                  提交
                </Button>
              </FooterToolbar>,
            ];
          },
        }}
        onFinish={async (values: addForm) => {
          const value: any = {
            comment: values.comment,
            name: values.name,
            tenantId: values.tenant || tenantId,
            rules: [
              {
                maxPrice: values?.maxPrice,
                effectStartTime:
                  values?.effectTime && getTimeMin(values?.effectTime[0].split(' ')[1]),
                effectEndTime: values?.effectTime && getTimeMin(values.effectTime[1].split(' ')[1]),
                timeItems: values?.timeItems?.map(encodeTimeItem),
                freeTime: values?.freeTime,
                type: 'small',
              },
            ],
          };
          const res = await addChargeItem(value);
          if (res) {
            if (res.code == 0) {
              message.success('添加成功');
              close();
              return true;
            }
            message.error('添加失败' + res?.message);
            return false;
          }

          return false;
        }}
        title="添加停车"
        // contextMenu="wwdawdawd"
      >
        <ProCard
          title={<div style={{ fontSize: 20, fontWeight: 700 }}>基本信息</div>}
          className={styles.card}
          style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
          bordered={false}
        >
          <Row gutter={36}>
            <Col lg={8} md={12} sm={24}>
              <ProFormText
                label={'优惠券名称'}
                fieldProps={{
                  showCount: true,
                  maxLength: 15,
                }}
                name="name"
                rules={[{ required: true, message: '请输入优惠券名称' }]}
                placeholder="自定义优惠券名称"
              />
            </Col>
            <Col lg={8} md={12} sm={24}>
              <ProFormText
                fieldProps={{
                  showCount: true,
                  maxLength: 15,
                }}
                label={'优惠券副标题'}
                name="name"
                rules={[{ required: true, message: '请输入副标题名称' }]}
                placeholder="自定义副标题名称"
              />
            </Col>
            <Col lg={8} md={12} sm={24}>
              <ProFormSelect
                label={'优惠类型'}
                valueEnum={{ 1: '一级', 2: '二级', 3: '三级' }}
                name="name"
                rules={[{ required: true, message: '请输入优惠券名称' }]}
                placeholder="选择优惠类型"
              />
            </Col>
          </Row>
          <Row gutter={36}>
            <Col lg={8} md={12} sm={24}>
              <ProForm.Item
                label={'满减'}
                name="name"
                rules={[{ required: true, message: '请输入副标题名称' }]}
              >
                <Input.Group compact>
                  <Form.Item noStyle name="lng" initialValue={2} style={{ width: 600 }}>
                    <InputNumber
                      controls={false}
                      min={0}
                      precision={2}
                      style={{ width: '38%', marginRight: '5%' }}
                      addonBefore={'满'}
                      size={'middle'}
                    />
                  </Form.Item>
                  <Form.Item noStyle name="lat" initialValue={2}>
                    <InputNumber
                      controls={false}
                      style={{ width: '57%' }}
                      precision={2}
                      addonBefore={'减'}
                      addonAfter={'元'}
                      size={'middle'}
                      min={0}
                    />
                  </Form.Item>
                </Input.Group>
              </ProForm.Item>
            </Col>
            <Col lg={8} md={12} sm={24}>
              <ProFormDigit
                fieldProps={{
                  addonAfter: '份',
                  precision: 0,
                }}
                label={'发放数量'}
                max={1000000}
                name="name"
                rules={[{ required: true, message: '请输入发放数量' }]}
                placeholder="自定义发放数量"
              />
            </Col>
          </Row>
          <Row gutter={36}>
            <Col md={{ span: 24 }} sm={24}>
              <ProFormTextArea
                label={'使用说明'}
                name="comment"
                rules={[{ required: true, message: '请输入使用说明' }]}
                placeholder="输入使用说明"
              />
            </Col>
          </Row>
        </ProCard>
        <ProCard
          style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
          title={<div style={{ fontSize: 20, fontWeight: 700 }}>基本规则</div>}
          bordered={false}
        >
          <Row gutter={36}>
            <Col lg={8} md={12} sm={24}>
              <ProFormSelect
                label={'用户类型'}
                valueEnum={{ 1: '一级', 2: '二级', 3: '三级' }}
                name="name"
                rules={[{ required: true, message: '请输入优惠券名称' }]}
                placeholder="选择优惠类型"
              />
            </Col>
            <Col lg={8} md={12} sm={24}>
              <ProFormDigit
                fieldProps={{
                  precision: 0,
                  addonAfter: '次',
                }}
                label={'每人限领'}
                name="name"
                min={1}
                rules={[{ required: true, message: '请输入副标题名称' }]}
                placeholder="请输入每人限领次数"
              />
            </Col>
          </Row>
          <Row gutter={36}>
            <Col lg={8} md={12} sm={24}>
              <ProFormSelect
                label={'有效期'}
                name="name"
                fieldProps={{
                  onChange: (e) => {
                    setExpiration(e);
                  },
                }}
                valueEnum={{ 1: '固定时间', 2: '领取后当天生效' }}
                rules={[{ required: true, message: '请选择有效期名称' }]}
                placeholder="选择有效期类型"
              />
            </Col>
            <Col lg={8} md={12} sm={24}>
              {expiration == 1 && (
                <ProFormDateTimeRangePicker
                  fieldProps={{
                    format: 'YY-MM-DD HH:mm:ss',
                  }}
                  placeholder={['请选择时间', '请选择时间']}
                  label={'固定日期'}
                  name="effectTime"
                  rules={[{ required: true, message: '请输入规则名称' }]}
                />
              )}
              {expiration == 2 && (
                <ProFormDigit
                  fieldProps={{
                    addonAfter: '天',
                  }}
                  label={'有效天数'}
                  name="effectTime"
                  rules={[{ required: true, message: '请输入规则名称' }]}
                />
              )}
            </Col>
          </Row>
          <Row gutter={36}>
            <Col lg={16} md={16} sm={24}>
              <ProFormText
                label={'跳转链接'}
                name="name"
                rules={[{ required: true, message: '请输入跳转链接' }]}
                placeholder="填写跳转链接"
              />
            </Col>
          </Row>
        </ProCard>
      </ProForm>
    </>
  );
};
